<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-esle-if 的实现原理</title>
</head>
<body>
<div id="change" class="change">
    <h1 data-if="score >=90" style="background-color: red">优秀</h1>
    <h1 data-else-if="score >=75" style="background-color: green"> 良好</h1>
    <h1 data-else-if="score >=60" style="background-color: blue"> 中等</h1>
    <h1 data-else style="background-color: yellow"> 差</h1>
</div>
<script>
    let score = 70
    let elements = document.querySelectorAll("#change > h1");
    // 是否删除其它节点状态
    let status = false

    for (let i = 0; i < elements.length; i++) {
        let element = elements[i]

        if (element.hasAttribute('data-if')) {
            let attributeValue = element.getAttribute("data-if");
            if (eval(attributeValue)){
                element.removeAttribute("data-if")
                status = true
            }
            else {
                // 删除所在的元素
                element.parentNode.removeChild(element)
            }
        }
        if (element.hasAttribute('data-else-if')) {
            if (status){
                // 删除所在的元素
                element.parentNode.removeChild(element)
            }

            let attributeValue = element.getAttribute("data-else-if");
            if (eval(attributeValue)){
                element.removeAttribute("data-if")
                status = true
            }
            else {
                // 删除所在的元素
                element.parentNode.removeChild(element)
            }
        }
        if (element.hasAttribute('data-else')) {
            if (status){
                // 删除所在的元素
                element.parentNode.removeChild(element)
            }
            let attributeValue = element.getAttribute("data-else");
            if (eval(attributeValue)){
                element.removeAttribute("data-else")
            }
        }
    }
</script>
</body>
</html>